import { FC, useEffect, useState } from 'react';
import { AutoComplete, AutoCompleteProps, Input } from 'antd';

const AutoEdit: FC<AutoCompleteProps> = (props) => {
  const [realOptions, $realOptions] = useState<Array<any>>([]);

  useEffect(() => {
    $realOptions(props.options);
  }, [props.options]);

  const searchHandle = (searchText: string) => {
    const hasValue = realOptions.some((ele) => ele.value === searchText);
    if (!hasValue && searchText && searchText.length > 0) {
      $realOptions((prev) => {
        prev.push({ value: searchText });
        return prev;
      });
    }
  };

  return (
    <AutoComplete
      {...props}
      options={realOptions}
      onSearch={searchHandle}
    ></AutoComplete>
  );
};

export default AutoEdit;
